<!--
 * @Author: coocase
 * @Date: 2021-03-12 09:35:19
 * @LastEditTime: 2021-06-07 11:19:33
 * @LastEditors: coocase
 * @Description: 详情页
 * @FilePath: \git\dami\src\pages\detail\detail.vue
-->
<template>
  <div class="detail-wrap">
      <div class="detail-title">
        <span>详情 ></span>
        <span>地点 ></span>
        <span>分类 ></span>
        <span>名称</span>
      </div>
            <detail-intro :datas = datas  v-if="datas" @getBuyInfo='getBuyInfo'></detail-intro>
      <div class="detail-info">
          <detail-info :datas = datas></detail-info>
      </div>
  </div>
</template>

<script>
import detailIntro from './detailIntro'
import detailInfo from './detailInfo'

export default {
    name:'Detail',
    data:function () {  
      return{
          datas:'',
      }
    },
    components:{
      detailIntro,
      detailInfo
    },
    watch: {
            $route(to, from) {
              // 对路由变化作出响应...
              //可以使用$router.go(0)进行刷新,（补充，该方法在ios手机上无效）
              //可以改用window.location.reload()
              this.$router.go(0)
            }
    },
    methods:{
      getDetail:function () {  
        this.$http.getRequest({
          api:'detail',
          data:{}
        }).then((res) => {
          this.datas = res
        }).catch((err) => {
          console.log(err);
        });
      },
      getBuyInfo:function (val) {  
            this.$emit('getBuyInfo',this.datas)
        },
      
      backToTop:function () {  
        //二者必定有一个为0

            var top = document.body.scrollTop || document.documentElement.scrollTop;
            
            //定义速度
            var speed = top / 5;
             
            var timer = setInterval(() => {
                if(document.body.scrollTop!=0){
                    document.body.scrollTop -= speed;
                }else if(document.documentElement.scrollTop!=0){
                    document.documentElement.scrollTop -= speed;
                }else if(document.body.scrollTop==0 || document.documentElement.scrollTop==0){
                    clearInterval(timer);
                   
                }
            }, 30)
      }
    },
    mounted:function () {  
      this.getDetail()
      //每次加载页面 返回顶部
      this.backToTop();
    },
    updated:function () {  
     
    }
}
</script>

<style scoped>
.detail-wrap{
  width: 1200px;
  margin: 0 auto;
}
</style>